<template>
	<!-- 物业项目 -->
	<div class="zs-table-page-container" v-loading="loading">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-items-center zs-layout-justify-between">
			<div class="zs-tabs">
				<div class="zs-tab" :class="{ 'zs-tab-active': index == curTabIndex }" v-for="(item, index) in dictObj.PROPERTY_SPECIAL_REPORT" :key="index" @click="changeTab(index)">{{ item.dictLabel }}</div>
			</div>
			<div class="db-tag-gray">{{ tag }} 用量</div>
		</div>
		<div class="zs-card zs-table-page-content">
			<el-table :data="tableData.data" class="zs-table-page-main" :stripe="true">
				<el-table-column type="index" label="序号" width="60" align="center" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column :formatter="defaultTableData" prop="projectName" label="项目" align="left" min-width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column :formatter="defaultTableData" prop="bizTypeName" label="业态" align="center"></el-table-column>
				<el-table-column :formatter="defaultTableData" prop="phaseName" label="阶段" align="center"></el-table-column>
				<el-table-column :formatter="defaultTableData" prop="investorName" label="集团" align="center"></el-table-column>
				<el-table-column :formatter="defaultTableData" prop="cityName" label="城市" align="center"></el-table-column>
				<el-table-column :formatter="defaultTableData" prop="standardName" label="标准" :align="'right'"></el-table-column>
				<el-table-column :formatter="defaultTableData" prop="yesterdayCommonDosage" :label="tag + '公区用电量'" align="right" />
				<el-table-column :formatter="defaultTableData" prop="yesterdayCommerceDosage" :label="tag + '商户用电量'" align="right" />
				<el-table-column :formatter="defaultTableData" prop="" label="操作" width="100" :align="'right'">
					<template #default="scope">
						<el-button class="zs-link" link size="small" @click="goDetail(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div> -->
		</div>
	</div>
</template>
<script setup>
	import dbPublicApi from '@/api/dbPublic';
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import { useRouter } from 'vue-router';
	import Energy from '@/api/Energy';
	import { defaultTableData } from '@/utils/publicUtils';

	const router = useRouter();
	const store = useStore();
	const curTabIndex = ref(0);
	let dictObj = store.getters.getDictObj(['PROPERTY_SPECIAL_REPORT']);

	// 分页
	// const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	// 列表 filed
	const tableData = reactive({
		currentPage: 1,
		// total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	const queryParams = reactive({ pageNo: 1, pageSize: curPageSize.value, managementCompanyAreaCode: '', dataTime: '' });
	queryParams.managementCompanyAreaCode = dictObj.PROPERTY_SPECIAL_REPORT[0].dictValue
	//列表数据源
	const loading = ref(false);
	const getList = async () => {
		tableData.loading = true;
		let res = await Energy.energyConsumptionReportApi(queryParams);
		if (res.data.code !== 200) return;
		tableData.data = res.data.data;
		// tableData.total = res.data.data.totalCount;
		tableData.loading = false;
	};

	//切换地区
	const changeTab = async index => {
		curTabIndex.value = index;
		queryParams.managementCompanyAreaCode = dictObj.PROPERTY_SPECIAL_REPORT[index].dictValue;
		await getList();
	};

	//时间相关
	let tag = ref('');
	const getDate = async () => {
		let res = await dbPublicApi.queryDataTimeApi();
		if (res.data.code != 200) return;
		tag.value = res.data.message;
		queryParams.dataTime = res.data.data;
		getList();
	};

	// 分页
	// const pageChange = (type, size) => {
	// 	if (type == 'size') {
	// 		queryParams.pageSize = size;
	// 	} else {
	// 		queryParams.pageNumber = size;
	// 	}
	// 	getList();
	// };

	const goDetail = row => {
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'EnergyElectricity',
				rTitle: '能源明细表',
				projectCode: row.projectCode,
				projectName: row.projectName,
				showTimeStamp: new Date(queryParams.dataTime).getTime(),
				source:"dashboard",
			},
		});
	};

	getDate();
</script>

<style scoped lang="scss">
	.base-card-img {
		max-width: 100%;
		width: 100%;
		border-radius: 4px;
	}
</style>
